import React, { useState, useEffect } from 'react'
import {
  Space,
  //  Card
} from 'antd'
// import OneCard from '../OneCard'
import OneList from '../OneList'
// import pageData from '../../naviData'
// import './BodyList.css'
function BodyLists (props) {// 110
  const maxHeightDiff = 70
  const [maxHeight, setMaxHeight] = useState(document.body.clientHeight - maxHeightDiff)
  const [appData, setAppData] = useState(props.pageData)

  useEffect(() => {
    setAppData(props.pageData)
  }, [props.pageData])

  useEffect(() => {
    window.addEventListener('resize', onWindowResize)
    return () => {
      window.removeEventListener('resize', onWindowResize)
    }
  }, [])
  function onWindowResize () {
    setMaxHeight(document.body.clientHeight - maxHeightDiff)
  }

  function getPageList2 (pageData) {
    return pageData.map((pageItem, pageIndex) => {
      return (
        <OneList key={pageItem.title + pageIndex} pageItem={pageItem} pageIndex={pageIndex} maxHeight={maxHeight}></OneList>
      )
    })
  }

  // const pageList = getPageList(appData)
  const pageList = getPageList2(appData)

  return (
    <Space align="start">
      {pageList}
    </Space>
  )

}

export default BodyLists


// const innerSpaceStyle = {
//   width: "100%"
// }
